<template>
	<view class="my_wrap">
		<view class="status-bar"></view>
		<view class="my_top"
			@click="hasLogin ? navTo('/pages/my/user', { login: true }) : navTo('/pages/auth/login')">
			<view class="my_userInfo space-between">
				<view class="center">
					<image :src="userInfo.imageUrl ? userInfo.imageUrl : '../../static/logo.png'" mode=""></image>
					<view class="column text">
						<text class="my_login">{{ userInfo.nickName ? userInfo.nickName : '请登录' }}</text>
						<text class="username" v-if="userInfo.username">用户名: {{ userInfo.username }}</text>
					</view>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<l-function-list :functionData="functionData"></l-function-list>
		
		<button @click="uploadImg">上传图片</button>
		<image :src="imageUrl" mode=""></image>
	</view>
</template>

<script>
	// 组件
	import lFunctionList from "../../components/l-function-list.vue"
	// 数据
	import functionData from "../../common/mock/function-list.js"
	import {
		mapState,
		mapGetters
	} from "vuex"
	
	import upload from "../../common/js/upload.js"

	export default {
		components: {
			lFunctionList
		},
		data() {
			return {
				functionData: functionData(),
				// userInfo: uni.getStorageSync('userInfo') || {}
				imageUrl: ''
			}
		},
		methods: {
			// 上传图片
			uploadImg() {
				uni.chooseImage({
					success: (res) => {
						upload({
							url: '/api/upload?file_id=0',
							filePath: res.tempFilePaths[0]
						}).then(result => {
							console.log(result);
							this.imageUrl = result.data.url
							console.log(this.imageUrl);
						}).catch(err => {
							console.log(err);
						})
					}
				})
			},
			
			// 登录
			/* login() {
				if (this.userInfo.nickName) {
					this.navTo('/pages/my/user')
					return 
				}
				uni.redirectTo({
					url: '/pages/auth/login'
				})
			} */
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		}
	}
</script>

<style lang="scss" scoped>
	.my_wrap {
		height: 100%;
	}

	.status-bar {
		height: calc(var(--status-bar-height) + 48px);
		background-color: $mxg-color-primary;
	}

	.my_top {
		margin-bottom: 30rpx;
		background-color: $mxg-color-primary;

		.my_userInfo {
			height: 100%;
			padding: 20rpx;
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;

			image {
				width: 150rpx;
				height: 150rpx;
				margin: 20rpx 40rpx 20rpx 20rpx;
				border-radius: 50%;
			}

			.my_login {
				font-size: 38rpx;
				font-weight: 700;
			}

			.text {
				text {
					height: 40rpx;
				}

				.username {
					margin-top: 20rpx;
					color: #959da5;
					font-size: 32rpx;
				}
			}

			&>text:last-child {
				line-height: 200rpx;
			}
		}
	}
</style>
